<template>
  <div v-if="questionnaires.length" class="card">
    <div class="card-header">关联的问卷</div>
    <div class="card-content custom-table">
      <div v-for="q in questionnaires" :key="q.id" class="easy-container">
        <router-link :to="`/questionnaires/fill_in?qn_key=${q.signature}`" class="title link">
          {{ q.title }}
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'related-questionnaires', // 关联的问卷
  data() {
    return {
      questionnaires: [],
    };
  },
  computed: {
    groupId() { return this.$route.params.groupId; },
  },
  created() {
    this.loadQuestionnaires();
  },
  methods: {
    // 加载群组关联的问卷
    loadQuestionnaires() {
      this.$api.groups.questionnaires({ groupId: this.groupId })
        .then((res) => { this.questionnaires = res.data; })
        .catch(() => {});
    },
  },
  watch: {
    groupId() {
      this.questionnaires = [];
      this.loadQuestionnaires();
    },
  },
};
</script>

<style></style>
